<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .blog{margin: 10px;}
        .blog li{
            width: 800px;list-style: none;border: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="blog">
        <textarea name="" id="" cols="30" rows="10" placeholder="请按住ctrl+enter发送"></textarea>
        <!-- 展示 -->
        <ul class="list"></ul>
    </div>
    <!-- 1.键盘事件
    onkeyup:键盘抬起事件
    onkeydown:键盘按下事件
    onkeypress:键盘按下再抬起事件 -->
    <script>
        // document.onkeyup=function () {
        //     console.log("键盘抬起事件");
        // }
        // document.onkeydown=function () {
        //     console.log("键盘按下事件");
        // }
        // document.onkeypress=function () {
        //     console.log("键盘按下再抬起事件");
        // }
    </script>

    2.获取键盘的键码
    通过keyCode或者whicj属性可以获取到键盘按键
    <script>
        // document.onkeydown=function(e){
        //     e=e || event;
        //     console.log(e);
        //     console.log(e.keyCode);//老的语法规定
        //     console.log(e.which);//新的语法规定
        //     console.log(e.keyCode || e.which);

        // }
        // 核心:回车13  0:48 A:65 a:97 空格32  
        //altkey对应alt键  ctrlkey对应ctrl键
    </script>

    <script>
        var textarea=document.querySelector('textarea');
        var list=document.querySelector('.list');

        // 1.利用ctrl+enter发送信息,判断文本域是否为空,不为空则创建li元素,加载内容,添加到列表当中

        document.onkeydown=function(e){
            e=e || event;
            if(e.ctrlKey && e.which==13){//ctrl+enter
                if(textarea.value!==""){
                    var oli=document.createElement('li');
                    oli.innerHTML =textarea.value;
                    oli.onclick=function(){
                        if(window.confirm('是否删除')){
                            oli.remove();
                        }
                    }
                    list.insertBefore(oli,list.children[0]);
                    textarea.value="";
                    textarea.focus();
                }else{
                    alert('请输入内容');
                }
            }
        }

    </script>

</body>
</html>